<template>
	<view :class="showt?'':'hidden-window'">
		<view class="address-window" :class="shows?'on':''">
			<view class="title">
				选择地址
				<text class="iconfont icon-guanbi" @click="close"></text>
			</view>
			<scroll-view scroll-y="true" class="list">
				<view class="item acea-row row-between-wrapper" :class="active==index?'on':''" v-for="(item,index) in addressData" :key="index" @click="chooseDizhi(index)">
					<text class="iconfont icon-ditu"></text>
					<view class="address">
						<view class="name">{{item.real_name}}<text class="phone">{{item.phone}}</text></view>
						<view class="line1">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
					</view>
					<text class="iconfont" :class="active==index?'icon-complete':''"></text>
				</view>
			</scroll-view>
			<navigator url="/pages/pack/user_address_list/user_address_list" class="addressBnt bg-color">选择其地址</navigator>
		</view>
		<view class="mask" @click="close"></view> 
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			show:function(e){
				clearTimeout(this.o)
				if(e){
					this.showt = e
					this.shows = e
				}else{
					this.shows = e
					this.o = setTimeout(()=>{this.showt = e},300)
				}
			}
		},
		data(){
			return{
				active:-1,
				shows:false,
				showt:false,
				addressData:[],
				o:null
			}
		},
		created() {
			this.getAddressist()
		},
		methods:{
			getAddressist:function(){
				const that = this;
				api.user.getAddressList().then(e=>{
					if(e.status == 200){
						let arr = [];
						for(let i of e.data){
							if(i.is_default == 1){
								arr.unshift(i)
								that.active = 0
							}else{
								arr.push(i)
							}
						}
						that.addressData = arr
					}
				})
			},
			chooseDizhi:function(e){
				let addressData = this.addressData;
				this.active = e;
				this.$emit("callback",addressData[e])
			},
			close:function(){
				this.$emit("close")
			}
		}
	}
</script>

<style>
	.hidden-window{
		opacity: 0;
		z-index: -1;
		position: relative;
	}
	.address-window{
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	}
	.address-window.on{
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transform: translate3d(0, 0, 0);
	}
	.address-window .title{
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
	}
	.address-window .title .iconfont{
		position: absolute;
		right: 30rpx;
		color: #8a8a8a;
		font-size: 35rpx;
	}
	.address-window .list{
		height: 256rpx;
	}
	.address-window .list .item{
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		height: 129rpx;
		font-size: 25rpx;
		color: #333;
	}
	.address-window .list .item.on{
		color: #fc4141!important;
	}
	.address-window .list .item.on .iconfont{
		color: #fc4141!important;
	}
	.address-window .list .item.on .address .name{
		color: #fc4141!important;
	}
	.address-window .list .item .iconfont{
		width: 36rpx;
		font-size: 37rpx;
		color: #2c2c2c;
	}
	.address-window .list .item .address{
		width: 560rpx;
	}
	.address-window .list .item .address .name{
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 4rpx;
	}
	.address-window .list .item .address .name .phone{
		margin-left: 18rpx;
	}
	.address-window .addressBnt{
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5;
	}
</style>
